<script setup>
import { listBug } from '@/api/dashboard'
import { ref } from 'vue'
const query = ref({
  pageNum: 1,
  pageSize: 100
})
const navList = ref([{ name: '监测', id: 1 }])
const bug = ref([])
const imgList = ref([])
const activeIndex = ref(0)
const handleChange = (newIndex) => {
  activeIndex.value = newIndex
}
const getData = () => {
  listBug(query.value).then((res) => {
    bug.value = res.rows
    imgList.value = res.rows.map((item) => {
      return item.cover
    })
  })
}
getData()
setInterval(() => {
  getData()
}, import.meta.env.VITE_APP_INTERVAL)
const jiance = ref(null)
function handleClick() {
  jiance.value.open()
}
</script>

<template>
  <Item-Box title="智慧茶园茶虫情测报" class="left-bottom" :navList="navList" @click="handleClick">
    <div class="header text-clamp-two">{{ bug.length > 0 ? bug[activeIndex].preventTime : '' }}</div>
    <div class="swiper">
      <el-carousel type="card" arrow="never" indicator-position="none" @change="handleChange" ref="carousel" v-if="imgList.length">
        <el-carousel-item v-for="item in imgList" :key="item">
          <img class="swiper-item" v-cover="item" />
        </el-carousel-item>
      </el-carousel>
      <img src="/src/assets/img/dizuo.png" class="dizuo" />
    </div>
    <div class="name">{{ bug.length > 0 ? bug[activeIndex].name : '' }}</div>
    <div class="introduce text-clamp-two">
      {{ bug.length > 0 ? bug[activeIndex].detail : '' }}
    </div>
  </Item-Box>
  <Jiance ref="jiance" />
</template>
<style lang="scss">
.swiper .el-carousel__mask {
  display: none;
}
.swiper .el-carousel__item {
  height: 110px;
}
.swiper .el-carousel__container {
  height: 110px;
}
</style>
<style lang="scss" scoped>
.left-bottom {
  height: 320px;
}
.header {
  margin-top: 13px;
  height: 38px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #ffb525;
  line-height: 19px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
.name {
  text-align: center;
  color: #fff;
}
.swiper {
  margin: 12px auto 0 auto;
  width: 400px;
  height: 126px;
  position: relative;
  .swiper-item {
    width: 180px;
    height: 110px;
    border-radius: 5px;
  }
  .dizuo {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
.introduce {
  margin-top: 8px;
  padding: 0px 35px;
  font-size: 14px;
  color: #aacfe5;
  height: 55px;
  margin-bottom: 10px;
  overflow: scroll;
}
</style>
